import React, { memo } from "react";
import PropTypes from "prop-types";
import style from "./sty.module.css";
import dayjs from "dayjs";
import Scroll from "@/components/scroll";

import { useHistory } from "react-router";

const Albums = (props) => {
  const { albums } = props;
  const history = useHistory();
  const goTo = (path) => {
    history.push(path);
  };
  return (
    <Scroll>
      <ul className={style.albums}>
        {albums &&
          albums.map((item) => (
            <li key={item.id} onClick={() => goTo(`/album/${item.id}`)}>
              <img src={item.picUrl} alt="" />

              <div className={style.right}>
                <div className={style.title}>{item.name}</div>
                <div>
                  {dayjs(item.publishTime).format("YYYY-MM-DD")} 歌曲
                  {item.size}
                </div>
              </div>
            </li>
          ))}
      </ul>
    </Scroll>
  );
};
Albums.propTypes = {
  albums: PropTypes.array,
};
Albums.defaultProps = {
  albums: [],
};

export default memo(Albums);
